<template>
  <el-dialog draggable v-model="tableParent.accidentPageInfoShow" @close="close" width="50%" :modal="false" :z-index="2001"
    :append-to-body="true" center>
    <div class="baogao">
      <el-table max-height="600" :data="paginatedTableData" style="width: 100%">
        <el-table-column prop="sgbh" label="事故编号" width="200" />
        <el-table-column prop="xzqh" label="行政区划" />
        <el-table-column prop="sgfssj" label="事故发生时间" width="200" />
        <!-- <el-table-column prop="lh" label="路号" /> -->
        <el-table-column prop="lm" label="路名" width="120" />
        <!-- <el-table-column prop="gls" label="公里数" /> -->
        <!-- <el-table-column prop="ms" label="米数" /> -->
        <el-table-column prop="sgdd" label="事故地点" />
        <el-table-column prop="sgrdyy" label="事故认定原因" />
        <el-table-column prop="swrs" label="死亡人数" />
        <el-table-column prop="ssrs" label="受伤人数" />
        <el-table-column prop="zjccss" label="直接财产损失" />
        <!-- <el-table-column prop="sglx" label="事故类型" /> -->
      </el-table>
      <div class="spans">
        <el-pagination :page-size="pageSize" :current-page="currentPage" layout="prev, pager, next" :total="totalItems"
          @current-change="handlePageChange" />
        <span>总页数：{{ totalPages }}</span>
        <span style="">总条数：{{ totalItems }}</span>
      </div>
      <!-- <div>
        <el-button type="primary" @click="tableParent.accidentPageInfoShow = false">
          返回
        </el-button>
      </div> -->
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
import { useAccidentTableList } from "@/store";

const tableParent = useAccidentTableList();
const totalItems = computed(() => tableParent.accidentPageInfoList.length);
const totalPages = computed(() => Math.ceil(totalItems.value / pageSize.value));
const pageSize = ref(10);
const currentPage = ref(1);

const paginatedTableData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return tableParent.accidentPageInfoList.slice(start, end);
});

const handlePageChange = (newPage: number) => {
  currentPage.value = newPage;
};

const close = ()=>{
  pageSize.value = 10;
  currentPage.value = 1;
  tableParent.accidentPageInfoShow = false;
}
</script>

<style lang="less" scoped>
.baogao {
  width: 100%;
  display: flex;
  justify-content: center;
  color: white;
  flex-direction: column;

  .cell {
    text-align: center;
  }
}

:global(.el-dialog) {
  border:1px solid #fff;
  background-color: #00313799 !important;
}

:deep(.el-pagination button:disabled),
:deep(.el-pagination .btn-prev),
:deep(.el-pagination > .is-last) {
  background: transparent !important;
}

:deep(.el-pager li) {
  background: transparent !important;
  color: white !important;
}

:deep(.el-pager li.is-active) {
  color: #429ea5 !important;
}

.el-table__inner-wrapper {
  text-align: center;
}

:deep(.cell) {
  text-align: center !important;
}

.spans {
  display: flex;
  align-items: center;
  gap: 20px;
  color: white;
}
</style>
